<script setup>

import router from "../../../router/index.js";
import HeaderVue from "../../components/HeaderVue.vue";
import {nextTick, ref} from "vue";
import WriteAnswerVue from "./WriteAnswerVue.vue";
import SubmitAnswer from "./SubmitAnswer.vue";
import {insertOrUpdate} from "../../../store/state.js";
import {getAiTips, getOptions, getPractice, submitPracticeAnswer} from "../../../api/practice/practice.js";
import {ElLoading, ElNotification} from "element-plus";
import {Position} from "@element-plus/icons-vue";
// 难度
const difficulties = ['简单', '中等', '困难'];
// 题目类型
const types = ['单选题', '多选题', '判断题', '填空题', '简答题'];
// 所有专业(知识)
const subject = ref(['数学', '语文', '英语', '物理', '化学', '生物', '政治', '历史', '地理']);
// 题目信息
const practice = ref({
  answer: '',
  content: "",
  difficulty: 0,
  id: 0,
  images: [],
  name: '',
  subject: "",
  type: 0,
})
// 单选选项
const radioOptions = ref([{
  value: 'A',
  content: '',
  checked: 0 // 选项未选中状态
}, {
  value: 'B',
  content: '',
  checked: 0 // 选项未选中状态
}, {
  value: 'C',
  content: '',
  checked: 0 // 选项未选中状态
}, {
  value: 'D',
  content: '',
  checked: 0
}]);
//多选选项
const checkboxOptions = ref([{
  value: 'A',
  content: '',
  checked: 0 // 选项未选中状态
}, {
  value: 'B',
  content: '',
  checked: 0 // 选项未选中状态
}, {
  value: 'C',
  content: '',
  checked: 0 // 选项未选中状态
}, {
  value: 'D',
  content: '',
  checked: 0
}])
// 判断题选项
const judgeOptions = ref([{
  value: 'T',
  content: '',
  checked: 0 // 选项未选中状态
}, {
  value: 'F',
  content: '',
  checked: 0 // 选项未选中状态
}])
// 选项对象
const option = ref({
  practiceId: 0,
  a:'',
  b:'',
  c:'',
  d:''
})
// 用户是否提交过答案
let hasSubmit = false;
// ai提示内容
let aiTip = ref(null);
// 对于简答题 ai的意见
let aiOpinion = ref(null);
// 布局
const labelPosition = ref('top')
const handleSubmitAnswer = () => {
  hasSubmit = true;
  let loading = ElLoading.service({
    text: '正在提交答案...',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  submitPracticeAnswer(practice.value.id,practice.value.answer).then(res => {
    nextTick(() => {
      loading.close();
    })
    if ( practice.value.type === 4 ) {
      aiOpinion.value = res.data;
      showHiddenCard();
    }else {
      if ( res.data === '正确' ) {
        ElNotification.success({
          title: '提交成功',
          message: '回答正确',
          duration: 2000
        })
      } else {
        ElNotification.error({
          title: '提交成功',
          message: '回答错误',
          duration: 2000
        })
      }
    }
  })
}

function showHiddenCard() {
  let dom = document.querySelector('.aiOption-card')
  dom.style.width = 500 + 'px';
  dom.style.height = 200 + 'px';
}

// 如果用户在进入页面后的120过后还没有点击提交答案按钮 显示ai提示
setTimeout(() => {
  if ( !hasSubmit ) {
    getAiTips(practice.value.id).then(res => {
      aiTip.value = res.data;
      showHiddenCard();
    })
  }
},120000)

// 获取单个题目信息
const handleGetPractice = async () => {
  // console.log(insertOrUpdate.value);
  // console.log(practice.value.id);
    await getPractice(Number(practice.value.id)).then(res => {
      practice.value=res.data;
      // console.log(practice.value);
      practice.value.answer=[];
      if(isOption()){
        console.log("获取选项")
        handleGetOption(practice.value.id);
      }
    })
}
// 判断是否添加选项
const isOption = () => {
  if(practice.value.type===0){
    // console.log("单选");
    option.value.a=radioOptions.value[0].content;
    option.value.b=radioOptions.value[1].content;
    option.value.c=radioOptions.value[2].content;
    option.value.d=radioOptions.value[3].content;
    return true;
  }
  else if(practice.value.type===1){
    // console.log("多选");
    option.value.a=checkboxOptions.value[0].content;
    option.value.b=checkboxOptions.value[1].content;
    option.value.c=checkboxOptions.value[2].content;
    option.value.d=checkboxOptions.value[3].content;
    return true;
  }
  else if(practice.value.type===2){
    // console.log("判断");
    option.value.a=judgeOptions.value[0].content;
    option.value.b=judgeOptions.value[1].content;
    return true;
  }
  else return false;
}

// 查询题目选项
const handleGetOption = async (id) => {
  await getOptions(id).then(res => {
    // console.log(practice.value.answer);
    option.value=res.data;
    // console.log(option.value);
    // 对选项赋值
    assignOption();
  })
}
// 选项赋值
const assignOption = () => {
  if(practice.value.type===0){
    radioOptions.value[0].content=option.value.a;
    radioOptions.value[1].content=option.value.b;
    radioOptions.value[2].content=option.value.c;
    radioOptions.value[3].content=option.value.d;
  }
  else if(practice.value.type===1){
    checkboxOptions.value[0].content=option.value.a;
    checkboxOptions.value[1].content=option.value.b;
    checkboxOptions.value[2].content=option.value.c;
    checkboxOptions.value[3].content=option.value.d;
  }
  else if(practice.value.type===2){
    judgeOptions.value[0].content=option.value.a;
    judgeOptions.value[1].content=option.value.b;
  }
}
practice.value.id=router.currentRoute.value.params.id;
// console.log(practice.value.id);



handleGetPractice();
</script>

<template>
  <el-container>
    <!--    头部导航栏-->
    <el-header class="header-outer">
      <HeaderVue></HeaderVue>
    </el-header>
    <el-main class="main-box">
      <el-form
          :label-position="labelPosition"
          label-width="auto"
          :model="practice"
          style="max-width: 900px"
      >
        <el-form-item label="题目名称">
          <div>{{ practice.name }}</div>
        </el-form-item>
        <el-form-item label="题目内容">
          <div>{{ practice.content }}</div>
        </el-form-item>
        <!--        题目类型选择-->
        <SubmitAnswer :practice="practice" :radioOptions="radioOptions" :judge-options="judgeOptions" :checkbox-options="checkboxOptions"></SubmitAnswer>
      </el-form>
      <el-card class="aiOption-card">
        <template #header>
          🤖{{ aiOpinion == null ? 'AI提示' : '作答结果'}}
        </template>
        {{aiOpinion == null ? aiTip : aiOpinion}}
      </el-card>
    </el-main>
    <!--    底部按钮-->
    <div class="bottom-button">
      <el-button @click="router.back()">返回</el-button>
      <el-button type="primary" @click="handleSubmitAnswer">提交答案</el-button>
    </div>
  </el-container>
</template>
<style scoped lang="less">
.header-outer {
  height: 100%;
  // 改变盒子背景 略灰一点
  background-color: #fff;
  // 改变外部盒子边界线便于区分
  border-bottom: 2px solid #eee;
  // 设置盒子底部阴影
  box-shadow: 0 2px 8px 0 rgba(7, 17, 27, 0.06);
}

.el-container {
  min-height: 100vh;
  position: relative;
  .main-box {
    margin:0 0 0 260px;
    position: relative;
    .aiOption-card {
      position: absolute;
      width: 0px;
      height: 0px;
      right: 20px;
      bottom: 0;
      border-radius: 10px;
      box-sizing: border-box;
      --un-shadow: 0 20px 25px -5px rgb(0 0 0 / .14), 0 8px 10px -6px rgb(0 0 0 / .12);
      box-shadow: 0 0 rgb(0 0 0 / 0), 0 0 rgb(0 0 0 / 0), var(--un-shadow);
      z-index: 1;
      backdrop-filter: blur(20px) saturate(180%);
      transition-property: all;
      transition-timing-function: cubic-bezier(.4, 0, .2, 1);
      transition-duration: 1s;
      font-size: 15px;
      overflow: hidden;
    }
  }
  .bottom-button {
    position: absolute;
    left: 50%;
    bottom: 3%;
  }
}

</style>